<template>
    <div id="movie-tab">
		<ul>
			<router-link tag="li" to="/movie/city">
				
				北京<i class="fa fa-caret-down"></i>
			</router-link>
			<router-link class="font-color" tag="li" to="/movie/now">
				
				正在热映
			</router-link>
			<router-link class="font-color" tag="li" to="/movie/coming">
				
				即将上映
			</router-link>
            <router-link tag="li" to="/movie/search">
				
				<i class="fa fa-search"></i>
			</router-link>
		</ul>
		<keep-alive>
			<router-view></router-view>
		</keep-alive>
        
	</div>
</template>
<script></script>
<style scoped>
#movie-tab{
    padding-top: 50px;
}
ul{
    border-bottom: 1px solid #ccc;
}

	li{
		display: inline-block;
		width: 25%;
		text-align: center;
        height: 40px;
        line-height: 40px;
        font-weight: bold;

	}
    .font-color{
        color:#666
    }
    .fa-caret-down{
        font-size: 5px;
    }
    .fa-search{
        font-size: 25px;
    }
	.router-link-active{
		color: #E54847;
        border-bottom: 2px solid #E54847;
	}
</style>